/* eslint-disable @typescript-eslint/restrict-plus-operands */
import React, { FC, useState, useEffect } from 'react'
import { Card, Button, Form, Input, Modal, Popover } from 'antd'
import { sendComments, getCommentsList } from '@/api/article'
import { emojis } from './emoji'
import { useLocation } from 'react-router-dom'
import style from './comment.module.scss'
const { TextArea } = Input

const Comments: FC = () => {
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [text, setText] = useState('')
  const location = useLocation()
  const [pinglunList, setPinglunList] = useState([])
  const isLogin = (e: any): void => {
    // 阻止事件穿透
    // e.nativeEvent.stopImmediatePropagation()
    const userInfo = localStorage.getItem('userInfo')
    // 登陆过
    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
    if (userInfo) {
      setIsModalOpen(false)
    } else {
      setIsModalOpen(true)
    }
  }

  const handleOk = (): void => {
    setIsModalOpen(false)
  }

  const handleCancel = (): void => {
    setIsModalOpen(false)
  }

  const onFinish = (values: any): void => {
    localStorage.setItem('userInfo', JSON.stringify(values))
    setIsModalOpen(false)
  }

  const onFinishFailed = (errorInfo: any): void => {
    console.log('Failed:', errorInfo)
  }

  const Foofun = (): void => {
    setIsModalOpen(false)
  }

  useEffect(() => {
    const userInfo = localStorage.getItem('userInfo')
    // 登陆过
    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
    if (userInfo) {
      setIsModalOpen(false)
    }
    constGetCommentsList()
  }, [])

  const addEmo = (item: any): void => {
    setText(text + emojis[item])
  }
  const id = location.pathname.split('/details/')[1]
  const Send = (): void => {
    const info: any = localStorage.getItem('userInfo')
    const userInfo = JSON.parse(info)
    sendComments({
      ...userInfo,
      content: text,
      url: location.pathname,
      hostId: id
    })
      .then((res) => {
        console.log(res)
      })
      .catch((error) => {
        console.log(error)
      })
    setText('')
    constGetCommentsList()
  }

  // 获取评论内容
  const constGetCommentsList = (): any => {
    console.log(id, '++++++++++++++++++++++++++++++++++++++++')
    return getCommentsList(id)
      .then((res) => {
        console.log(res, '---sacscsac--')
        setPinglunList(res.data.data)
      })
      .catch((error) => {
        console.log(error)
      })
  }

  const content = (
    <div
      style={{
        width: '500px'
      }}
    >
      {Object.keys(emojis).map((item: any, index: number) => {
        return (
          <span key={index} className={style.span} onClick={() => addEmo(item)}>
            {emojis[item]}
          </span>
        )
      })}
    </div>
  )

  return (
    <div className={style.mb30}>
      <p
        style={{
          textAlign: 'center',
          marginTop: '20px'
        }}
      >
        Comment
      </p>
      <Card className={style.card} style={{ width: 750 }}>
        <div className={style.mark} onClick={isLogin}>
          <TextArea
            value={text}
            onChange={(e) => {
              setText(e.target.value)
            }}
            rows={4}
            placeholder="Please enter the content of the comment (Markdown is supported)"
          />

          <Popover
            placement="bottomRight"
            title="表情 "
            content={content}
            trigger="click"
          >
            <span>
              <svg viewBox="0 0 1024 1024" width="20px" height="20px">
                <path
                  d="M288.92672 400.45568c0 30.80192 24.97024 55.77216 55.77216 55.77216s55.77216-24.97024 55.77216-55.77216c0-30.7968-24.97024-55.76704-55.77216-55.76704s-55.77216 24.97024-55.77216 55.76704z m334.60224 0c0 30.80192 24.97024 55.77216 55.77216 55.77216s55.77216-24.97024 55.77216-55.77216c0-30.7968-24.97024-55.76704-55.77216-55.76704s-55.77216 24.97024-55.77216 55.76704z m-111.5392 362.4704c-78.05952 0-156.13952-39.08096-200.75008-100.3776-16.77312-22.31296-27.84256-50.15552-39.08096-72.45824-5.53472-16.77312 5.5296-33.4592 16.77312-39.08096 16.77312-5.53472 27.84256 5.53472 33.46432 16.768 5.53472 22.30784 16.77312 39.08608 27.84256 55.77728 44.61568 55.76704 100.38272 83.69664 161.664 83.69664 61.30176 0 122.7008-27.84256 156.16-78.07488 11.15136-16.77824 22.30784-38.99904 27.84256-55.77728 5.62176-16.768 22.30784-22.30272 33.4592-16.768 16.768 5.53472 22.30784 22.30272 16.768 33.4592-5.61152 27.84256-22.2976 50.14528-39.08096 72.45824-38.912 61.37856-116.98176 100.3776-195.06176 100.3776z m0 194.51392C268.4928 957.44 66.56 755.52256 66.56 511.99488 66.56 268.48256 268.4928 66.56 511.98976 66.56 755.50208 66.56 957.44 268.48256 957.44 511.99488 957.44 755.52256 755.50208 957.44 511.98976 957.44z m0-831.45728c-213.78048 0-386.00192 172.21632-386.00192 386.01216 0 213.8112 172.22144 386.0224 386.00192 386.0224 213.80096 0 386.0224-172.2112 386.0224-386.0224 0-213.79584-172.22144-386.01216-386.0224-386.01216z"
                  fill="currentColor"
                ></path>
              </svg>
              <span>Emoji</span>
            </span>
          </Popover>
          <Button
            size="small"
            style={{
              float: 'right',
              marginTop: '10px'
            }}
            onClick={Send}
          >
            Send
          </Button>
        </div>
      </Card>
      {pinglunList.map((item: any, index: number) => {
        return (
          <>
            <Card style={{ width: 750 }}></Card>
          </>
        )
      })}
      <Modal
        footer={false}
        title="Please set your information"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="name"
            name="name"
            rules={[{ required: true, message: 'Please input your name!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="email"
            name="email"
            rules={[{ required: true, message: 'Please input your email!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button onClick={Foofun}>Cancel</Button>
            <Button type="primary" danger htmlType="submit">
              Save
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}

export default Comments
